<template>
  <div>
    <h1>System Message</h1>
    <h2>This is the system message page!</h2>
    <h2>Here you can send and receive messages to and from other users.</h2>
  </div>

  <div class="field" ref="field">
    <img class="ball" ref="ball"  src='@/assets/R-C.png' alt="R-C" @click="handleBallClick" />
  </div>
</template>

<script>
export default {
  name: "MessageSystem",
  data() {
    return {
      message: "",
      messages: [],
    }
  },
  created(){
    this.makeEaseOut(),
    this.bounce()
  },
  methods: {
    makeEaseOut(timing) {
      return function(timeFraction) {
        return 1 - timing(1 - timeFraction); 
      }
    },
    bounce(timeFraction){
      return Math.max(0, (1 - Math.abs(2 * timeFraction - 1)) * (1 - timeFraction));

      // for (let a = 0, b = 1; a += b, b /= 2) {
      //   if (timeFraction >= (7 - 4 * a) / 11) {
      //     return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
      //   }
      // }
    }, 
    handleBallClick() {
      const ball = this.$refs.ball; // 使用 this.$refs 访问 DOM 元素
      const field = this.$refs.field;
      let to =  field.clientHeight - ball.clientHeight;
      this.animateScrollTo({
        duration: 1000,
        timing: this.makeEaseOut(this.bounce),
        draw(progress) {
          ball.style.transform = `translateY(${to * progress}px)`;
        }
      });
    },
    animateScrollTo({ duration, timing, draw }) {
      let start = performance.now();

      function animate(time) {
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;

        draw(timing(timeFraction));

        if (timeFraction < 1) {
          requestAnimationFrame(animate);
        }
      }
      requestAnimationFrame(animate);
    }
  }
}
</script>

<style>
.field {
  height: 300px;
  width: 500px;
  background-color: #fff;
  border-bottom: 3px black groove;
  position: relative;
}

.ball {
  position: absolute;
  cursor: pointer;
  width: 60px;
  height: 60px;
}
</style>